<!-- 自定义顶部导航栏 -->
<template>
	<view>
		<view class="top-fixed">
			<!-- 状态栏高度 -->
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<!-- 导航栏 -->
			<view class="menu">
				<!-- 左侧返回标签 -->
				<view class="back" @click="goBack" v-if="isBack">
					<slot name="left-btn"></slot>
				</view>
				<!-- 中间标题 -->
				<view class="title" :style="{'padding-right':  isBack ? '40rpx': '0rpx'}" v-if="isTiltle"
					@click="$emit('click')">
					<!-- 插槽名字 -->
					<slot name="title"></slot>
				</view>
				<!-- 右侧按钮 -->
				<view class="back" @click="$emit('rightBtn')" v-if="isRightBtn"
					:style="{'margin-right': mpLeft + 'rpx'}">
					<!-- 插槽名字 -->
					<slot name="right-btn"></slot>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view :style="fixedStyle"></view>
	</view>
</template>

<script>
	export default {
		name: "own-nav-bar",
		props: {
			isBack: {
				type: Boolean,
				default: false
			},
			isTiltle: {
				type: Boolean,
				default: true
			},
			isRightBtn: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				mpLeft: 0,
			};
		},
		mounted() {
			// 动态绑定高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
			// 此处是设置右边设置按钮在小程序界面时候的位置
			// #ifdef MP-WEIXIN
			this.mpLeft = 170
			// #endif
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.top-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1030;
		background: #FFFFFF;
	}

	.menu {
		height: 50px;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx;

		.back {
			// width: 50rpx;
			// height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
